/**
 * Created by levy on 16/6/15.
 */
import FooterBtn from "./FooterBtn";
import MaskLayout from "./MaskLayout";

/**
 * @desc [底部弹出层表单]
 * @args [formTit, itemRender, footerBtn[args], belong] 标题, 渲染内容的函数, 底部按钮组件参数
 *
 * params:
 *      tit 标题, 不传则不显示
        itemRender, 区别在于这是一个函数,自定义渲染内容
 *      footerBtn 底部按钮
 *      visible 是否可见. this 显示
 */
var BottomForm = React.createClass({
    getDefaultProps: function () {
        return {
            formCon: '',// 传入表单需要的参数,需要时使用
            belong: '', // 更高级的标识
            onBlurHandler: '',// textarea失焦函数
            itemRender: () => null,
        }
    },
    componentWillReceiveProps(nextProps) {
        //conVisible是有用的
        
        // var me = this;
        // me.setState({
        //     formConVisible: ''
        // });
        // setTimeout(function() {
        //     me.setState({
        //         formVisible: ''
        //     })
        // }, 500);
    },
    render: function () {
        var props = this.props,
            formContent = props.itemRender(props.formCon); 
        return (
            <section className={"bottom-form-component " + (props.formVisible || props.visible)} >
                <MaskLayout displayNone={props.displayNone} layoutBelong="form" importantBelong={this.props.belong} />
                <div className={"bottom-form-layout " + (props.formConVisible || props.visible)}>
                    <div className="bottom-form-con">
                        <h1>{props.formTit || props.tit}</h1>
                        {formContent}
                    </div>
                    <FooterBtn belong={this.props.belong} data={this.props.formFooterBtn || this.props.footerBtn} onBlurHandler={this.props.onBlurHandler} />
                </div>
            </section>
        )
    },

    _touchMoveHandler: function ( event ) {
        event.preventDefault();
    }
});

export default BottomForm;
